<script lang="ts" setup>
import { ElDivider, ElMessageBox, ElMessage } from "element-plus";
import { reactive, ref } from "vue";

const person = reactive([
  {
    title: "人员行为分析",
    list: [
      {
        title: "人员聚集监测",
        status: "已启用",
        class: "",
        description:
          "实时监测人群密度与分布，预警非法集会和踩踏风险，支撑快速警力调度。实现高密度场景下的实时动态统计，抗遮挡干扰，支持多视角融合分析，预测人群扩散方向与潜在冲突热点。",
      },
      {
        title: "踩踏预警监测",
        status: "已启用",
        class: "",
        description:
          "通过运动模式分析识别对冲、停滞等危险信号，提前触发疏散干预。毫秒级识别异常运动模式（如停滞、对冲），量化局部压力分布，区分正常拥挤与危险挤压状态。",
      },
      {
        title: "突然加速物体监测",
        status: "已启用",
        class: "",
        description:
          "检测抛物、车辆撞击等突发威胁，防范公共场所暴力事件。捕捉高速运动目标，排除自然现象干扰（如飞鸟），实现跨帧轨迹连续性分析。",
      },
      {
        title: "打架斗殴监测",
        status: "已启用",
        class: "",
        description:
          "识别肢体冲突行为，自动报警并定位事件中心，减少人员伤害。在复杂肢体遮挡下精准识别攻击动作，降低误报率（如拥抱、舞蹈），支持低光照环境泛化。",
      },
      {
        title: "攀爬翻越监测",
        status: "已启用",
        class: "",
        description:
          "监控围墙、窗户异常接触，防止非法入侵或逃逸行为。高精度人体-障碍物接触点检测，区分日常攀爬（如维修作业）与非法入侵行为。",
      },
      {
        title: "人员摔倒监测",
        status: "已启用",
        class: "",
        description:
          "及时发现意外摔倒（尤其是老人/伤员），联动急救响应。融合姿态时序与场景语义（如楼梯、平地），区分主动卧倒与意外摔倒，支持多角度姿态重建。",
      },
      {
        title: "定点徘徊监测",
        status: "已启用",
        class: "",
        description:
          "识别敏感区域可疑滞留，预防踩点、偷盗等预谋犯罪。识别循环路径与异常停留，适应复杂城市道路拓扑结构。",
      },
      {
        title: "屋顶人员监测",
        status: "已启用",
        class: "",
        description:
          "高空危险行为预警（如跳楼、非法安装设备），保障公共安全。高空俯视在屋顶活动的人员目标，区分危险行为与正常活动。",
      },
      {
        title: "身份识别分析",
        status: "已启用",
        class: "",
        description:
          "提取人员局部特征，对人员身份进行识别，并应用于重点人员管控领域。辅助追踪逃犯、失踪人员，管控重点区域人员准入。",
      },
    ],
  },
  {
    title: "环境监测模型",
    list: [
      {
        title: "烟花爆竹",
        status: "已启用",
        class: "",
        description:
          "定位非法燃放/储存点，减少火灾与空气污染风险。多传感器协同（火光、声波、红外），排除节日灯光干扰，定位隐蔽燃放点。",
      },
      {
        title: "非法焚烧",
        status: "已启用",
        class: "",
        description:
          "识别露天焚烧垃圾/秸秆行为，保护生态环境。区分炊烟与有害焚烧，融合气体成分检测与烟雾扩散模型溯源。",
      },
      {
        title: "建筑物倒塌",
        status: "已启用",
        class: "",
        description:
          "实时裂缝检测与三维形变分析，排除临时施工干扰，支持灾后快速建模。灾后快速评估建筑结构安全，指导救援路线规划。",
      },
      {
        title: "非法倾倒垃圾",
        status: "未启用",
        class: "grey",
        description:
          "识别散落堆叠物体，结合时序影像对比溯源倾倒行为，适应野外复杂地形。追踪垃圾源头，遏制环境污染与土地破坏。",
      },
      {
        title: "违章建筑",
        status: "已启用",
        class: "",
        description:
          "自动比对规划数据，打击侵占公共资源的违建行为。高分辨率影像下的违建自动比对，融合历史审批数据，排除临时设施干扰。",
      },
      {
        title: "非法盗采",
        status: "已启用",
        class: "",
        description: "监控矿产/砂石盗采活动，保护自然资源与国土安全。",
      },
    ],
  },
  {
    title: "道路交通监测",
    list: [
      {
        title: "人流监测",
        status: "已启用",
        class: "",
        description:
          "通过实时人流热力分析预测聚集风险点，动态调整部署。结合历史数据与实时轨迹预测突发人流对冲，提前设置分流栏杆或开放备用出口，降低踩踏事故概率。",
      },
      {
        title: "车流监测",
        status: "已启用",
        class: "",
        description: "通过车型分类与流量统计，优化城市交通信号控制策略。",
      },
      {
        title: "道路拥堵监测",
        status: "已启用",
        class: "",
        description: "实现道路人、非机动车、车辆流量汇总，监测道路拥堵状况。",
      },
      {
        title: "交通事故监测",
        status: "已启用",
        class: "",
        description:
          "快速定位事故现场，辅助责任判定与救援资源调配。快速识别人员受伤、车辆变形、碎片散落，区分事故与普通停车，支持多车碰撞关联分析。",
      },
    ],
  },
]);

const cardVisible = ref(false);

const onMounted = () => {
  setTimeout(() => {
    cardVisible.value = true;
  }, 100);
};

onMounted(() => {
  onMounted();
});

const updateStatus = async (sectionIndex, itemIndex, item) => {
  const isCurrentlyEnabled = item.status === "已启用";
  const targetStatus = isCurrentlyEnabled ? "停用" : "启用";

  try {
    await ElMessageBox.confirm(
      `确定要${targetStatus}【${item.title}】吗？`,
      `${targetStatus}确认`,
      {
        type: "warning",
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      }
    );
    const newStatus = isCurrentlyEnabled ? "未启用" : "已启用";
    person[sectionIndex].list[itemIndex].status = newStatus;
    if (newStatus == "未启用") {
      person[sectionIndex].list[itemIndex].class = "grey";
    } else {
      person[sectionIndex].list[itemIndex].class = "";
    }
    ElMessage.success(`${targetStatus}成功`);
  } catch (error) {
    if (error !== "cancel") {
      ElMessage.error("操作失败");
      console.error("状态更新失败:", error);
    }
  }
};
</script>

<template>
  <div class="p-2">
    <div class="page" v-for="(el, index) in person" :key="index">
      <h1 class="section-title" :style="{ animationDelay: `${index * 0.1}s` }">
        {{ el.title }}
      </h1>
      <ElDivider />
      <div class="person">
        <div
          class="content"
          :class="[
            item.class,
            cardVisible ? 'card-enter-active' : 'card-enter',
          ]"
          v-for="(item, itemIndex) in el.list"
          :key="itemIndex"
          :style="{
            animationDelay: `${(index * el.list.length + itemIndex) * 0.05}s`,
          }"
        >
          <div class="titleTop">
            <p>{{ item.title }}</p>
            <div
              class="status"
              :class="{ use: item.status === '已启用' }"
              @click="updateStatus(index, itemIndex, item)"
            >
              {{ item.status }}
            </div>
          </div>
          <div class="detail">
            {{ item.description }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page {
  padding: 24px 24px 20px 16px;
  margin-bottom: 8px;
  background: #fff;
  opacity: 0;
  animation: fadeIn 0.5s ease-out forwards;
}

.page:nth-child(1) {
  animation-delay: 0.1s;
}

.page:nth-child(2) {
  animation-delay: 0.2s;
}

.page:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-title {
  margin-bottom: 12px;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  color: #303133;
  text-align: left;
  opacity: 0;
  animation: slideInLeft 0.6s ease-out forwards;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.person {
  display: flex;
  flex-wrap: wrap;
  place-content: flex-start flex-start;
}

.person:last-child {
  padding: 0;
  margin: 0;
  border: none;
}

.content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 414px;
  height: 211px;
  padding: 22px 16px 20px 16px;
  margin-top: 20px;
  margin-right: 20px;
  background: #f7fef3;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.3s ease;
}

.content:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border-color: var(--el-color-primary);
}

.card-enter {
  opacity: 0;
  transform: translateY(30px);
}

.card-enter-active {
  opacity: 1;
  transform: translateY(0);
  animation: cardEnter 0.5s ease-out forwards;
}

@keyframes cardEnter {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  70% {
    opacity: 1;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 1440px) {
  .content {
    margin-right: 14px !important;
  }
  .content:nth-child(3n) {
    margin-right: 0px !important;
  }
}

@media (min-width: 1920px) {
  .content {
    margin-right: 20px !important;
  }
  .content:nth-child(3n) {
    margin-right: 20px !important;
  }
}

.titleTop {
  display: flex;
  margin-bottom: 12px;
}

.status {
  position: absolute;
  top: 16px;
  right: 12px;
  width: 74px;
  height: 28px;
  line-height: 28px;
  color: #909399;
  text-align: center;
  background: #f0f2f5;
  border-radius: 14px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.status:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.use {
  color: #67c23a;
  background: #e8f9e0;
}

.use:hover {
  color: #529b2e;
  background: #d1f5c7;
}

p {
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 25px;
  color: #303133;
  text-align: left;
  transition: color 0.3s ease;
}

/* .pink {
  background: #fff2f3;
}

.purple {
  background: #eaf0fc;
}

.blue {
  background: #edf8fd;
}

.orange {
  background: #fff4ed;
} */

.grey {
  background: #f5f7fa;
}

.detail {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  color: #606266;
  text-align: justify;
  transition: color 0.3s ease;
}

.content:hover .detail {
  color: #303133;
}

:deep(.el-divider--horizontal) {
  margin: 0;
}
</style>